@import '../../styles/var.scss';
.swiper{
  position: relative;
  &-items{
    height:100%;
    white-space: nowrap;
    -webkit-text-size-adjust:none;
    font-size:0;
    transition:transform 0.4s ease 0s;
  }
  &-item{
    display:inline-block;
    font-size:14px;
    height:100%;
    position:relative;
    >img{
      max-width:100%;
      max-height:100%;
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      -ms-transform:translate(-50%,-50%);
    }
  }
  &-inner{
    position:relative;
    margin:0 auto;
    height:100%;
    overflow:hidden;
  }
  .swiper-arrow{
    position:absolute;
    left:-44px;
    top:50%;
    border:0;
    background:#eee;
    outline:none;
    width:44px;
    height:44px;
    border-radius:50%;
    margin-top:-22px;
    cursor: pointer;
    text-indent: 6px;
    font-size: 16px;
    transition:left 0.2s ease 0s;
    box-shadow:0 0 10px rgba(0,0,0,0.15);
    &[disabled] {
      opacity: 0.65;
      cursor: not-allowed;
    }
    &-right{
      left:auto;
      right:-44px;
      text-indent: -6px;
      transition:right 0.2s ease 0s;
    }
  }
  &:hover {
    .swiper-arrow{
      left:-22px;
      &-right{
        left: auto;
        right:-22px;
      }
    }
  }
  &-nav{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:0;
    text-align:center;
    z-index:10;
    span{
      font-size:0;
      display:inline-block;
      border:0;
      background:#f5f5f5;
      outline:none;
      // height:12px;
      // width:12px;
      height:5px;
      width:15px;
      // border-radius:50%;
      top:-40px;
      position:relative;
      margin:0 4px;
      box-shadow:0 0 2px rgba(0,0,0,0.1);
      &.active{
        background:$color-primary;
      }
    }
  }
}